<template>
  <div class="app-container">
    <div class="filter-container">
      <div v-if="!isComplexLayout">
        <slot name="FilterItems" />

        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          :size="size"
          :loading="loading"
          @click="pageChange(1)"
        >
          {{ L('Find') }}
        </el-button>

        <slot name="ExtendButtons" />
      </div>

      <div v-else>
        <div style="text-align:right">
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            :size="size"
            :loading="loading"
            @click="pageChange(1)"
          >
            {{ L('Find') }}
          </el-button>

          <slot name="ExtendButtons" />
        </div>

        <slot name="FilterItems" />
      </div>

    </div>

    <div class="table-container">
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :size="size"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        :height="tbHeight"
        @sort-change="tableSortChange"
        @selection-change="handleSelectionChange"
        @row-click="rowClick"
      >

        <slot name="TableColumns" />

      </el-table>
    </div>

    <div class="datatable-paging">
      <el-pagination
        :size="size"
        :page-sizes="[10, 50, 100, 150]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        :current-page="currentPage"
        @size-change="pagesizeChange"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script>
import PagedFilterAndSortedRequest from '@/store/entities/pagedFilterAndSortedRequest'

export default {
  name: 'PagedTable',
  props: {
    size: {
      type: String,
      default: 'small'
    },
    entityName: {
      type: String,
      default: ''
    },
    requestParam: {
      type: Object,
      default: () => { return {} }
    },
    isComplexLayout: {
      type: Boolean,
      default: false
    },
    tbHeight: {
      type: Number,
      default: 570
    }
  },

  data() {
    return {
      multipleSelection: [],
      pagerequest: { ...PagedFilterAndSortedRequest }
    }
  },

  computed: {
    list() {
      if (this.entityName === '') { return [] }
      return this.$store.state[this.entityName].list
    },
    totalCount() {
      if (this.entityName === '') { return 0 }
      return this.$store.state[this.entityName].totalCount
    },
    currentPage() {
      if (this.entityName === '') { return 0 }
      return this.$store.state[this.entityName].currentPage
    },
    pageSize() {
      if (this.entityName === '') { return 0 }
      return this.$store.state[this.entityName].pageSize
    },
    loading() {
      if (this.entityName === '') { return true }
      return this.$store.state[this.entityName].loading
    }
  },

  async created() {
    this.initialize()
  },

  methods: {
    initialize() {
      if (this.entityName === '') return
      this.$store.commit(`${this.entityName}/SET_ENTITY_NAME`, this.entityName)
      this.pageChange(1)
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    rowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    tableSortChange(column) {
      this.pageChange(1)
      if (column.order === 'descending') {
        this.pagerequest.sorting = `${column.prop} desc`
      } else {
        this.pagerequest.sorting = `${column.prop} asc`
      }
      if (!column.prop) { this.pagerequest.sorting = '' }
      this.getpage()
    },
    async getpage() {
      this.pagerequest.maxResultCount = this.pageSize
      this.pagerequest.skipCount = (this.currentPage - 1) * this.pageSize
      // filters
      for (var i in this.requestParam) {
        this.pagerequest[i] = this.requestParam[i]
      }
      await this.$store.dispatch({
        type: `${this.entityName}/getAll`,
        data: this.pagerequest
      })
    },
    pageChange(page) {
      this.$store.commit(`${this.entityName}/SET_CURRENT_PAGE`, page)
      this.getpage()
    },
    pagesizeChange(pagesize) {
      this.$store.commit(`${this.entityName}/SET_PAGE_SIZE`, pagesize)
      this.getpage()
    }
  }
}
</script>
